<template>
  <div>
    <div class="crm-container">
      <div class="customer-content">
        <div class="column-box_picture">
          <div ref="preRevenueChart" style="width: 100%; height: 420px"></div>
        </div>
        <div class="column-box_picture">
          <div
            ref="preRevenueAndOverdueChart"
            style="width: 100%; height: 420px"
          ></div>
        </div>
      </div>
      <div class="column-box_statis">
        <!-- 表格区域  :loading="loading"-->
        <el-table
          :data="transData"
          border
          style="width: 100%;color: #666666; font-size: 14px;"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            v-for="(item, index) in transTitle"
            :label="item.label"
            :key="index"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// 表头组件
import CRMHead from "./components/CRMHead.vue";
import Table from "./mixins/table";

import { projectedRevenueStatisAPI } from "@/api/roi";

export default {
  /** 预收益统计 */
  name: "preRevenueStatis",
  // mixins: [Table, initChart],
  data() {
    return {
      originTitle: ["预收益统计", "还款中", "还款中+逾期"],
      transTitle: [],
      transData: [],
      noOverdueList: [], //还款中
      hasOverdueList: [], // 还款中+逾期
      monthList: []
    };
  },
  components: {
    CRMHead
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const params = {
        year: this.year,
        deptIds: this.deptIds,
        isAuth: 0
      };
      projectedRevenueStatisAPI(params)
        .then(res => {
          this.monthList = res.data.monthList;
          this.hasOverdueList = res.data.hasOverdueList; //还款中+逾期
          this.noOverdueList = res.data.noOverdueList; //还款中
          this.transData = [
            this.noOverdueList,
            this.hasOverdueList,
            this.monthList
          ];
          this.initEchart();
          this.putdata();
        })
        .catch(() => {});
    },
    /** 搜索 */
    crmSearch() {},

    handleHandle() {},
    // 柱状图
    initEchart() {
      // 还款中
      let chart = this.$echarts.init(this.$refs.preRevenueChart);
      let option = {
        title: {
          text: "预收益统计——还款中(元)"
        },
        color: ["#2ea1ff"],
        tooltip: {
          // trigger:'axis',
          // axisPointer:{
          //   type:'shadow'
          // },
          valueFormatter: function(value) {
            return value + "元";
          }
        },
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: {
            alignWidthLabel: true
          }
        },
        yAxis: {},
        series: [
          {
            data: this.noOverdueList, //[120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 10, 20],
            type: "bar",
            barWidth: "50%"
            // tooltip:{

            // }
          }
        ]
      };
      chart.setOption(option);

      // 还款中+逾期
      let mychart = this.$echarts.init(this.$refs.preRevenueAndOverdueChart);
      let myoption = {
        title: {
          text: "预收益统计——还款中+逾期(元)"
        },
        color: ["#56d4ae"],
        tooltip: {
          // trigger:'axis',
          // axisPointer:{
          //   type:'shadow'
          // },
          valueFormatter: function(value) {
            return value + "元";
          }
        },
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        },
        yAxis: {},
        series: [
          {
            data: this.hasOverdueList, //[120, 20, 15, 80, 70, 10, 30, 100, 150, 80, 10, 20],
            type: "bar",
            barWidth: "50%"
          }
        ]
      };
      mychart.setOption(myoption);

      window.addEventListener("resize", () => {
        this.$nextTick(() => {
          chart.resize();
          mychart.resize();
        });
      });
    },
    //数据转化方法
    putdata() {
      this.tableData = [];
      var arr = [];
      const monthList = this.monthList;
      const hasOverdueList = this.hasOverdueList;
      const noOverdueList = this.noOverdueList;
      hasOverdueList.forEach((item, index) => {
        arr.push({
          zero: monthList[index],
          one: noOverdueList[index],
          two: item
        });
      });
      this.tableData = arr; //this.transData; // ROI统计-年度
      if (this.tableData.length > 0) {
        let matrixData = this.tableData.map(row => {
          let arr = [];
          for (let key in row) {
            arr.push(row[key]);
          }
          return arr;
        });
        if (matrixData.length > 0) {
          this.transData = matrixData[0].map((col, i) => {
            return [
              this.originTitle[i],
              ...matrixData.map(row => {
                return row[i];
              })
            ];
          });
          this.transTitle = matrixData.map((col, i) => {
            return [i + 1];
          });
          this.transTitle.unshift("");
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
.crm-container {
  background-color: #fff;
  padding: 16px 0;
}
.customer-content {
  display: flex;
  justify-content: space-between;
}
.column-box_picture {
  height: 450px;
  border: 1px solid #e5e5e5;
  padding: 24px;
  margin: 0 15px 8px 15px;
  width: 50%;
}
.column-box_statis {
  margin: 24px 15px 10px;
  height: 253px;
  // border: 1px solid #e5e5e5;
}
/deep/ .has-gutter {
  display: none;
}
/deep/ .el-table__cell {
  border-right: 1px solid #e5e5e5 !important;
}
/deep/ .el-table__row {
  & td:first-child {
    color: #333;
    font-size: 14px;
    font-weight: bold !important;
  }
}
/deep/ tbody {
  & .el-table__row td {
    color: #333;
    font-size: 14px;
  }
}
/deep/ .el-table__body {
  & .el-table__row:nth-child(2) {
    color: #666 !important;
  }
}
</style>
